import "./index.scss"

import React, { Component } from 'react'
import {
    Row , Col 
}  from "antd"
import * as  echarts from "echarts"
import { ajax } from "../../api";
export default class UserFenxi extends Component {
    componentDidMount(){
        ajax.findadviselist()
        .then(res=>{
            if(res.code==200){
                this.initUserChart1(res.result)
                this.initUserChart2(res.result)
            }
        })
    }
    initUserChart1 = (list)=>{
        var myChart = echarts.init(document.getElementById('mainone'));
        var option = {
            title: {
                text: '意见类型分分析',
                left: 'center'
            },
            tooltip: {},
            legend: {
                data:['人数'],
                left:'left'
            },
            xAxis: {
                data: ["分量","锅底","小菜","味道","美甲","小游戏","节日","其他"]
            },
            yAxis: {},
            series: [{
                name: '人数',
                type: 'bar',
                showBackground: true,
                data: [
                    list.filter(item=>item.category[1]=='分量意见').length,
                    list.filter(item=>item.category[1]=='锅底意见').length,
                    list.filter(item=>item.category[1]=='小菜意见').length,
                    list.filter(item=>item.category[1]=='味道意见').length,
                    list.filter(item=>item.category[1]=='美甲服务').length,
                    list.filter(item=>item.category[1]=='小游戏服务').length,
                    list.filter(item=>item.category[1]=='节日祝贺服务').length,
                    list.filter(item=>item.category[0]=='其他意见').length,
                ]
            }]
        };
        myChart.setOption(option);
    }
    

    initUserChart2 = (list)=>{
        var myChart = echarts.init(document.getElementById('maintwo'));
        var option = {
            title: {
                text: '其他意见分析',
                subtext: '其他意见',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
            },
            series: [
                {
                    name: '其他意见占比',
                    type: 'pie',
                    radius: '60%',
                    avoidLabelOverlap: false,
                    data: [
                        {value: list.filter(item=>item.category[1]=='生活意见').length, name: '生活意见'},
                        {value: list.filter(item=>item.category[1]=='薪资意见').length, name: '薪资意见'},
                        {value: list.filter(item=>item.category[1]=='环境意见').length, name: '环境意见'},
                    ],
                    // itemStyle: {
                    //     borderRadius: 10,
                    //     borderColor: '#fff',
                    //     borderWidth: 2
                    // },
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        myChart.setOption(option);
    }
    render() {
        return (
            <div>
                <h2>意见信息分析</h2>
                <Row style={{width:'100%'}}>
                    <Col span={11} offset={0}>
                        <div className="box" id="mainone" style={{paddingTop:10,width:'100%',height:400,border:'1px solid #ddd'}}></div>
                    </Col>
                    <Col span={11} offset={1}>
                        <div className="box" id="maintwo" style={{paddingTop:10,width:'100%',height:400,border:'1px solid #ddd'}}></div>
                    </Col>
                </Row>
            </div>
        )
    }
}
